<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./res/fontawesome-free-5.15.4-web/css/all.css">
</head>
<body>
    <div id="app" class="flex-column">
        <!-- 顶部 -->
        <div class="top flex-row">
            <div class="top-place flex-center">孝感</div>
            <div class="top-name flex-center">小章电影集团</div>
            <div class="top-seek flex-center">
                <i class="fas fa-search"></i>
            </div>
        </div>
        <!-- 轮播图部分 -->
        <div class="head">
            
        </div>
        <!-- 中间电影部分 -->
        <div class="body">
            <!-- 每一个电影板块 -->
            <div class="movie flex-row">
                <div class="movie-left">
                    <img class="movie-img flex-center" src="./img/飞驰2.webp" alt="">
                </div>
                <div class="movie-middle flex-column">
                    <div class="movie-name">
                        <span>飞驰人生2</span>
                    </div>
                    <div class="movie-introduction">
                        <span>剧情/喜剧/运动</span><br>
                        <span>中国大陆/121分钟</span><br>
                        <span>2024-02-10(中国大陆)</span>
                    </div>
                </div>
                <div class="movie-right flex-column">
                    <div class="movie-score flex-center">8.8</div>
                    <div class="movie-buy flex-center">
                        <div class="movie-buy-bg">
                            <button class="flex-center">购票</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="movie flex-row">
                <div class="movie-left">
                    <img class="movie-img flex-center" src="./img/飞驰2.webp" alt="">
                </div>
                <div class="movie-middle flex-column">
                    <div class="movie-name">
                        <span>飞驰人生2</span>
                    </div>
                    <div class="movie-introduction">
                        <span>剧情/喜剧/运动</span><br>
                        <span>中国大陆/121分钟</span><br>
                        <span>2024-02-10(中国大陆)</span>
                    </div>
                </div>
                <div class="movie-right flex-column">
                    <div class="movie-score flex-center">8.8</div>
                    <div class="movie-buy flex-center">
                        <div class="movie-buy-bg">
                            <button class="flex-center">购票</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="movie flex-row">
                <div class="movie-left">
                    <img class="movie-img flex-center" src="./img/飞驰2.webp" alt="">
                </div>
                <div class="movie-middle flex-column">
                    <div class="movie-name">
                        <span>飞驰人生2</span>
                    </div>
                    <div class="movie-introduction">
                        <span>剧情/喜剧/运动</span><br>
                        <span>中国大陆/121分钟</span><br>
                        <span>2024-02-10(中国大陆)</span>
                    </div>
                </div>
                <div class="movie-right flex-column">
                    <div class="movie-score flex-center">8.8</div>
                    <div class="movie-buy flex-center">
                        <div class="movie-buy-bg">
                            <button class="flex-center">购票</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="foot flex-row">
            <div class="foot-1 flex-column flex-center">
                <div class="flex-column">
                    <i class="far fa-thumbs-up fa-2x"></i>
                </div>
                <div class="">推荐</div>
            </div>
            <div class="foot-2 flex-column flex-center">
                <div class="flex-column">
                    <i class="fas fa-seedling fa-2x"></i>
                </div>
                <div class="">分类</div>
            </div>
            <div class="foot-3 flex-column flex-center">
                <div class="flex-column">
                    <i class="fas fa-sun fa-2x"></i>
                </div>
                <div class="">排行</div>
            </div>
            <div class="foot-4 flex-column flex-center">
                <div class="flex-column">
                    <i class="fas fa-address-card fa-2x"></i>
                </div>
                <div class="">我的</div>
            </div>
        </div>
        
    </div>
</body>
</html>